<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <style>
        .prizeconfirm .layui-layer-btn {
            height:50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .prizeconfirm .layui-layer-btn .layui-layer-btn0{
            border: 1px solid #dedede;
            background-color: #fff;
            color: #333;
            border-radius: 2px;
        }
        .prizeconfirm .layui-layer-content{
            display: none;
        }
        .content{
            padding:5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .type-item{
            width:10%;
            padding:5px;
            height:20px;
            border:solid 1px #000000;
            text-align: center;
            margin:2% 8% 2% 8%;
            cursor:pointer;
        }
        .type-item:hover{
            border:solid 1px #a29c9c;
            color:#a29c9c;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">任务名称</label>
        <div class="layui-input-block">
            <input type="text" name="task_title" lay-verify="required" lay-reqtext="任务名称不能为空" placeholder="请输入任务名称" value="" class="layui-input" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">任务类型</label>
        <input type="hidden" name="task_type" id="tasktype" value="" lay-verify="required" lay-reqtext="任务类型不能为空">

        <div class="layui-input-block" style="display: flex">
            <button class="layui-btn" onclick="createTaskType()">点击选择类型</button>
            <div class="showTaskType" style="margin-left:10px;line-height:36px;"></div>

            <!--<select name="task_type">-->
                <!--<option value=""></option>-->
                <!--<option value="1">推荐玩家</option>-->
                <!--<option value="2">达成级别</option>-->
                <!--<option value="3">转轮摇奖</option>-->
                <!--<option value="4">金币转账</option>-->
                <!--<option value="5">团队人数</option>-->
                <!--<option value="6">发红包</option>-->
                <!--<option value="7">连续签到</option>-->
                <!--<option value="8">生意出售</option>-->
                <!--<option value="9">生意购买</option>-->
                <!--<option value="10">兑换材料</option>-->
                <!--<option value="11">积分转账</option>-->
                <!--<option value="12">生意交租</option>-->
                <!--<option value="13">激活账号</option>-->
                <!--<option value="14">首次注册</option>-->
                <!--<option value="15">打劫玩家</option>-->
                <!--<option value="16">反击玩家</option>-->
                <!--<option value="17">每日答题</option>-->
                <!--<option value="18">卡券使用</option>-->
                <!--<option value="19">金币充值</option>-->
            <!--</select>-->
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">完成数量</label>
        <div class="layui-input-block">
            <input type="number" name="task_number" min="1" lay-verify="required"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">参与等级</label>
        <div class="layui-input-block">
            <select name="level_limit">
                <option value="0">全部等级</option>
                <option value="1">1级</option>
                <option value="2">2级</option>
                <option value="3">3级</option>
                <option value="4">4级</option>
                <option value="5">5级</option>
                <option value="6">6级</option>
                <option value="7">7级</option>
                <option value="8">8级</option>
                <option value="9">9级</option>
                <option value="10">10级</option>
                <option value="11">11级</option>
                <option value="12">12级</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">是否循环任务</label>
        <div class="layui-input-block">
            <input type="radio" name="circulation" lay-filter="circulation"  value="2" title="否"  checked="">
            <input type="radio" name="circulation" lay-filter="circulation" value="1" title="是">
        </div>
    </div>
    <div class="layui-form-item" style="display: none" id="circulation_period_div">
        <label class="layui-form-label">循环周期</label>
        <div class="layui-input-block">
            <input type="number" name="circulation_period" min="1" step="1" value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">任务描述</label>
        <div class="layui-input-block">
            <textarea name="task_desc" class="layui-textarea" lay-verify="required" placeholder="请输入任务描述"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" checked="" name="task_status" value="1" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">奖项设置</label>
        <div class="layui-input-block">
            <button class="layui-btn" onclick="createPrize(2)">创建奖项</button>
        </div>
    </div>
    <div class="layui-form-item" id="prize_table">

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script src="/static/admin/prize.js"></script>
<script>
    layui.use(['form','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate=layui.laydate,
            $ = layui.$;
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked){
                this.value=1;
            }else{
                this.value=2;
            }
        });
        form.on('radio(circulation)',function(data){
            if(data.value==1){
                $("#circulation_period_div").css("display",'block');
            }else{
                $("#circulation_period_div").css("display",'none');
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: "/admin/Active/task_add?action=ajax",
                type: 'post',
                async: true,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        parent.layer.msg("操作成功!", {icon:1,time: 1000}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });
                        return;
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    /**
     * @context 选择类型
     */
    var taskType;
    function createTaskType()
    {
        taskType=layer.open({
            type: 1 ,
            title: "选择类型",
            area: ['600px', '450px'],
            shade: 0.5,
            maxmin: true,
            content:"<div class=\"content\">\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(1,this)\">推荐玩家</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(2,this)\">达成级别</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(3,this)\">转轮摇奖</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(4,this)\">金币转账</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(5,this)\">团队人数</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(6,this)\">发红包</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(7,this)\">连续签到</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(8,this)\">生意出售</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(9,this)\">生意购买</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(10,this)\">兑换材料</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(11,this)\">积分转账</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(12,this)\">生意交租</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(13,this)\">激活账号</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(14,this)\">首次注册</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(15,this)\">打劫玩家</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(16,this)\">反击玩家</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(17,this)\">每日答题</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(18,this)\">卡券使用</div>\n" +
            "                <div class=\"type-item\" onclick=\"chooseTaskType(19,this)\">金币充值</div>\n" +
            "\n" +
            "            </div>",
            success:function(layero,index){
                // 禁止回车键打开弹窗
                $(":focus").blur();
            }
        })
    }

    /**
     * @context 选择类型
     * @param type
     * @param obj
     */
    function chooseTaskType(type,obj)
    {
       layer.close(taskType);
        $("#tasktype").val(type);
        $(".showTaskType").html($(obj).text());
    }
</script>
</body>
</html>